/*
  横向布局
  还有一个竖向布局 Column

  Flexible,可以规定子控件的约束，松的或者很紧
 */

import 'package:flutter/material.dart';

void main() {
  runApp(RowApp());
}

class RowApp extends StatefulWidget {
  const RowApp({Key? key}) : super(key: key);

  @override
  _RowAppState createState() => _RowAppState();
}

class _RowAppState extends State<RowApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ROW",
      home: Scaffold(
        appBar: AppBar(title: Text('Rows')),
        body: ListView(
          // 生成列表
          children: [
            Row(
              children: [
                OutlinedButton(onPressed: () {}, child: Text('点我有惊喜')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  var colors = [Colors.black, Colors.deepOrangeAccent, Colors.blueAccent];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ROW",
      home: Scaffold(
        appBar: AppBar(title: Text('Rows')),
        body: Row(
          // 生成列表
          children: List<Widget>.generate(
              3,
              (index) => Expanded(
                  // 平分宽度,还可以使用flex分配权重
                  child: Container(color: colors[index]))),
        ),
      ),
    );
  }
}

class MyApp1 extends StatelessWidget {
  final colors = [Colors.black, Colors.deepOrangeAccent, Colors.blueAccent];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ROW",
      home: Scaffold(
        appBar: AppBar(title: Text('Rows')),
        body: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // 把剩余空间分配在子控件之间
            // 生成列表
            children: List<Widget>.generate(
                3,
                (index) => Container(
                      color: colors[index],
                      width: 100,
                      height: 100,
                    ))),
      ),
    );
  }
}

class MyApp2 extends StatelessWidget {
  var colors = [Colors.black, Colors.deepOrangeAccent, Colors.blueAccent];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ROW",
      home: Scaffold(
        appBar: AppBar(title: Text('Rows')),
        body: Row(
            mainAxisAlignment:
                MainAxisAlignment.spaceAround, // 把剩余空间分配在子控件和左右边距之间
            // 生成列表
            children: List<Widget>.generate(
                3,
                (index) => Container(
                      color: colors[index],
                      width: 100,
                      height: 100,
                    ))),
      ),
    );
  }
}

class MyApp3 extends StatelessWidget {
  var colors = [Colors.black, Colors.deepOrangeAccent, Colors.blueAccent];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ROW",
      home: Scaffold(
        appBar: AppBar(title: Text('Rows')),
        body: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 把剩余空间分配在子控件和之间
            // 生成列表
            children: List<Widget>.generate(
                3,
                (index) => Container(
                      color: colors[index],
                      width: 100,
                      height: 100,
                    ))),
      ),
    );
  }
}
